<template>
	<view class="computing-page">
		<!-- <view class="container">
			<echarts ref="echarts" :option="option" canvasId="echartsqiu"></echarts>
		</view> -->
		
		<view class="pool-A">
			<l-liquid v-model:current="modelVale" background="#f6faff" size="300rpx" waveColor="#b0c8ff" :percent="target">
			<view class="pool-item">
				<view class="item-title">
					超算力池
				</view>
				<view class="item-num">
					算力 6%/月
				</view>
				<view class="item-num">
					进会比例 30%
				</view>
			</view>
			</l-liquid>
		</view>
		<view class="pool-B">
			<l-liquid v-model:current="modelVale" background="#f6faff" size="300rpx" waveColor="#b0c8ff" :percent="target">
			<view class="pool-item">
			
				<view class="item-title">
					中算力池
				</view>
				<view class="item-num">
					算力 0.7%/月
				</view>
				<view class="item-num">
					进会比例 30%
				</view>
	
			</view>
		</l-liquid>
		<l-liquid v-model:current="modelVale" background="#f6faff" size="300rpx" waveColor="#b0c8ff" :percent="target">
			<view class="pool-item">
				<view class="item-title">
					微算力池
				</view>
				<view class="item-num">
					算力 0.5%/月
				</view>
				<view class="item-num">
					进会比例 30%
				</view>
			</view>
		</l-liquid>
		</view>
		<view class="btn-box">
			<u-button size="large" style="width: 40%;" shape="circle" color="#6897ff" type="primary"
				text="一键复利"></u-button>
			<u-button size="large" style="width: 40%;" shape="circle" color="#0B0D1C" type="primary"
				text="一键赎回"></u-button>
		</view>
		<view class="info-box">
			<view class="_th">
				<view class="_tr">
					时间
				</view>
				<view class="_tr">
					复制详情
				</view>
				<view class="_tr">
					每日收益
				</view>
				<view class="_tr">
					AI池CBU余量
				</view>
			</view>
			<view class="_tb" v-for="(item,index) in 4" :key="index">
				<view class="_td">
					2023.11.11
				</view>
				<view class="_td">
					加仓20个CBU
				</view>
				<view class="_td">
					---
				</view>
				<view class="_td">
					<view>
						130
					</view>
					<view class="income" v-if="isincome">
						(+收益10)
					</view>
				</view>
			</view>
			<view class="">
				<u-empty width="264rpx" height="203.72rpx" :show="false" mode="car" icon="/static/ecology/no-data.png"
					text="没有更多数据了">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue'
	export default {
		components: {
			echarts
		},
		data() {
			return {
				isincome: false,
				target: 30,
				modelVale: 20,
				option: {}
			}
		},
		onReady() {
			this.initWaterBall();
		},
		methods: {
			initWaterBall() {
				this.option = {
					title: {
						text: 'Referer of a Website',
						subtext: 'Fake Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.computing-page {
		padding: 30rpx;

		.container {
			width: 100%;
			height: 300px;
		}

		.pool-A {
			display: flex;
			justify-content: center;

			.pool-item {
				margin-top: 10rpx;
				// background-image: url('/static/ai/pool-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 300rpx;
				height: 300rpx;
				text-align: center;

				.item-title {
					font-weight: 700;
					color: #333333;
					font-size: 32rpx;
					margin-top: 60rpx;
				}

				.item-num {
					color: #999999;
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}

		.pool-B {
			display: flex;
			justify-content: space-between;

			.pool-item {
				margin-top: 10rpx;
				// background-image: url('/static/ai/pool-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 300rpx;
				height: 300rpx;
				text-align: center;

				.item-title {
					font-weight: 700;
					color: #333333;
					font-size: 32rpx;
					margin-top: 60rpx;
				}

				.item-num {
					color: #999999;
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}

		.btn-box {
			padding: 40rpx 0;
			display: flex;
			justify-content: center;
		}

		.info-box {
			padding: 30rpx;
			background-color: #F6FAFF;
			border-radius: 10rpx;

			._th {
				display: flex;
				justify-content: space-between;

				._tr {
					width: 160rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999999;
				}
			}

			._tb {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				._td {
					width: 160rpx;
					font-size: 24rpx;
					color: #333333;
					text-align: center;

					.income {
						font-size: 24rpx;
						color: #CCCCCC;
					}
				}
			}
		}
	}
</style>